import {
  ResponsiveContainer,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts";

export function Chart({
  options = [],
  fill = "#8884d8",
}: {
  options: { name: string; value: number }[];
  fill?: "#82ca9d" | "#8884d8";
}) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={options}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="value" fill={fill} />
      </BarChart>
    </ResponsiveContainer>
  );
}
